<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%String path = request.getContextPath();%>
<html>
<head>
    <title>Title</title>
    <link href="<%=path%>/static/layui/css/layui.css" rel="stylesheet">
    <style>
        .laytable-cell-radio{
         padding: 15px 0 0 0;
        }
    </style>
</head>
<body>
<!--内容开始-->
<div class="layui-fluid" style="margin-top: 10px;">
    <div id="searchCard" class="layui-card"
         style="border-radius:20px;align-items: center;;box-shadow: 10px 10px 5px #cccccc;">
        <div class="layui-card-body" style="height: 100px">
            <form class="layui-form" id="form">
                <div class="layui-form-item">
                    <div class="layui-inline" style="padding: 0">
                        <label class="layui-form-label" style="width:60px">工号：</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="" class="layui-input" lay-verify="myNumber" id="findNum" >
                        </div>
                        <label class="layui-form-label" style="width:60px">姓名：</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name=""  class="layui-input"  id="findName">
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block"  style="margin-left: 15px">
                        <div class="layui-input-inline" >
                            <button class="layui-btn "  style="background-color: #1AB394;color: white;border-radius:10px" id="find">搜索</button>
                            <button class="layui-btn "  style="background-color: #F8AC59;color: white;border-radius:10px" id="reset">重置</button>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-fluid" style="margin-top: 15px;">
    <div class="layui-card" style="border-radius:20px;box-shadow: 10px 10px 5px #cccccc;padding: 5px;">
        <div class="layui-card-body">
        <table id="userTable" class="layui-table" lay-filter="userTable" >
        </table>
        </div>
    </div>
</div>
<script src="<%=path%>/static/layui/layui.all.js"></script>
<script src="<%=path%>/static/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=path%>/static/myjs/MyLayer.js"></script>
<script>

    var table;
    var layer=window.top.layer
    layui.use(['form','table'], function() {
        table=layui.table
        form=layui.form
        form.verify({
            myNumber: function (value, item) { //value：表单的值、item：表单的DOM对象
                value=value.trim()
                if (!/^\d*$/.test(value)) {
                    return '工号只能为纯数字';
                }
            }
        })
    })

    $("#find").click(()=>{
        if ( MyLayer.formcheck("form")){
            fresh()
        }
        return false
    })
    $("#reset").click(()=>{
        $("#findNum").val("")
        $("#findName").val("")
        fresh()
        return false
    })

    fresh(1)
    //刷新数据
     function fresh(cur) {
         let data={
             userNum:$("#findNum").val(),
             name:$("#findName").val()
         }
        let first
        //渲染
        table.render({
            elem: '#userTable'
            , height: 312
            , url: "<%=path%>/system/user/list"//接口
            , method:"post"
            , where: data//参数数据
            , limit: 1
            , page:{
                layout: [ 'count', 'prev', 'page', 'next', 'skip']
                ,curr: cur //设定初始页
            }
            ,parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code===1?0:1, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                }
            }
            ,done: function (obj, page) {
                //如果是第一次,不执行

            }
            , cols: [[ //表头
              {type:'radio',align:"center"}
            , {field: 'userNum', title: '工号'}
            , {field: 'name', title: '姓名'}
        ]]
    });
    }

</script>
</body>
</html>